<template>
  <div class="box">
    <van-nav-bar title="登录" left-text="返回" right-text="注册" left-arrow @click-left="onClickLeft"
      @click-right="onClickRight" />
    <img class="logoimg" src="https://kano.guahao.com/UZf304375120?webp=80" alt="">
    <van-tabs v-model:active="active">
      <van-tab title="密码登录">
        <van-form @submit="onSubmit" class="form">
          <van-cell-group inset>
            <van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号"
           :rules="[
                    { required: true, message: '请填写手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                ]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[
                    { required: true, message: '请填写密码' },
                    { pattern: /^[a-zA-Z0-9]{6,12}$/, message: '密码格式不正确' }
                ]"  />
          </van-cell-group>
          <p style="margin-left: 2.7rem; color: #676363;" @click="router.push('/forgetPassword')" >  忘记密码</p>
          <van-checkbox v-model="checked" class="checkbox">
            <p>
              我已经认真阅读、理解并同意
              <a href="/mes">《微医服务协议》《法律声明》《隐私权政策》《儿童个人信息处理规则》</a>
            </p>
          </van-checkbox>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="验证码登录">
        <van-form @submit="onSubmitCode">
          <van-cell-group inset>
            <van-field v-model="phoneCode" name="手机号" label="手机号" placeholder="手机号"
           :rules="[
                    { required: true, message: '请填写手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                ]" />

          </van-cell-group>
          <van-cell-group inset>
            <van-field v-model="code" center clearable label="短信验证码" placeholder="请输入短信验证码">
              <template #button>
                <van-button size="small" type="primary" :disabled="disabled" @click="btnCode">{{ getCode }}</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>

      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup lang="ts">
// @ts-ignore
import { ref } from 'vue';
// @ts-ignore
import instance from '../axios/index.ts';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
// @ts-ignore
import { debounce } from '../utils/index.ts'
const phone = ref('');
const password = ref('');
const phoneCode = ref('');
const code = ref('');
const checked = ref(false);
const router = useRouter()
const active = ref(0);
const getCode = ref('获取验证码');
const disabled = ref(false)
const onClickLeft = () => history.back();
const onClickRight = () => {
  router.push('/register');
};
// 密码登录 
const onSubmit = debounce(() => {
  if (!checked.value) {
    showToast('请阅读并同意协议');
    return;
  }
  const data = {
    phone: phone.value,
    password: password.value,
  };
  instance.post('/api/login', data).then((res) => {
    if (res.data.code === 200) {
      showToast('登陆成功');
      localStorage.setItem('token', res.data.data.token);
      localStorage.setItem('user', res.data.data.name);
      localStorage.setItem('img', res.data.data.img);
      localStorage.setItem('phone', res.data.data.phone);
      localStorage.setItem('id', res.data.data.id);
      router.push('/home/my');
    } else {
      showToast('登陆失败');
    }
  });
  // @ts-ignore
}, 1000)



function getRandomValue() {
  const values = [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000];
  const randomIndex = Math.floor(Math.random() * values.length);
  return values[randomIndex];
}
// 点击发送验证码 
const btnCode = () => {
  if (phoneCode.value == '') {
    showToast('请输入手机号')
    return;
  } else {
    const data = {
      phone1: phoneCode.value
    }
    instance.post('/api/code', data).then((res) => {
      if (res.data.code === 200) {
        disabled.value = true
        let count = 30;
        getCode.value = `${count}秒后重发送`;
        const timer = setInterval(() => {
          count--;
          getCode.value = `${count}秒后重发送`;
          if (count === 0) {
            clearInterval(timer);
            disabled.value = false
            getCode.value = '获取验证码';
          }
        }, 1000);
        setTimeout(() => {
          showToast(res.data.data.yzm)
          localStorage.setItem('code', res.data.data.yzm)
          localStorage.setItem('token', res.data.data.token);
          localStorage.setItem('user', res.data.data.name);
          localStorage.setItem('img', res.data.data.img);
          localStorage.setItem('phone', res.data.data.phone);
        }, getRandomValue());
      } else {
        showToast(res.data.message)
      }
    })
  }
}

// 验证码登录 
const onSubmitCode = debounce(() => {
  if (code.value == localStorage.getItem('code')) {
    showToast('登录成功')
    router.push('/home/home')
  } else {
    showToast('验证码错误')
  }
  // @ts-ignore
}, 1000)

</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;

}

.logoimg {
  width: 0.8rem;
  height: 0.3rem;
  margin-left: 0.3rem;
  margin-top: 0.1rem;
}

h2 {
  margin-left: 0.35rem;
  margin-top: 0.1rem;
}

.form {
  margin-top: 0.2rem;
}

.checkbox {
  margin: 0.1rem;
  margin-left: 0.3rem;
}
</style>